<!--
 * @Author: likaijie 847094299@qq.com
 * @Date: 2025-04-07 10:09:46
 * @LastEditors: likaijie 847094299@qq.com
 * @LastEditTime: 2025-04-07 11:22:19
 * @Description: 
-->
<template>
  <div class="provider-list-page">
    <el-table
      v-loading="loading"
      show-overflow-tooltip
      stripe
      border
      :data="balances"
      style="width: 100%"
    >
      <el-table-column prop="provider" align="center" label="提供商" />
      <el-table-column prop="balance" align="center" label="余额" />
      <el-table-column prop="healthy" label="健康状况" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.healthy" type="success">正常</el-tag>
          <el-tag v-else type="danger">异常</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="unit" align="center" label="单位" />
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getProviderBalances } from "@/api/adminProvidersApi";

// 根据接口返回数据定义提供商数据类型，可根据实际字段补充
interface Provider {
  balance: string;
  provider: string;
  healthy: boolean;
  unit: string;
}

const balances = ref<Provider[]>([]);

const formatStatus = (row: Provider) => {
  return row.healthy ? "健康" : "不健康";
};
const loading = ref(false);
// 获取 API 提供商列表
async function fetchProviders() {
  try {
    loading.value = true;
    const { data, success, message } = await getProviderBalances();
    if (success) {
      balances.value = data.balances;
    } else {
      ElMessage.error(message || "获取API提供商列表失败");
    }
  } catch (error) {
    console.error(error);
    ElMessage.error("请求API提供商列表失败");
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  fetchProviders();
});
</script>

<style scoped>
.provider-list-page {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
</style>
